<script setup lang="ts">
import {useUserStore} from "@/store/user";
import {reqChangeUserInfo} from "@/api/user";
import {onMounted, reactive, ref} from "vue";

const userStore = useUserStore();
const storeUserinfo = userStore.userInfo;
let showSex = ref(false)

let sex = ref('')

switch (userStore.userInfo.gender) {
  case "0":
    sex.value = '男'
    break
  case "1":
    sex.value = '女'
    break
  case "2":
    sex.value = '保密'
    break
  default:
    sex.value = '请选择性别'
}

let userinfo = reactive({
  nickName: '',
  gender: "0",
  signature: ''
})

userinfo = {...storeUserinfo}


// 新增图片
const modificationAvatar = () => {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: (res) => {
      uni.uploadFile({
        url: '/sxg/sxg_user/avatar', // 仅为示例，非真实的接口地址
        filePath: res.tempFilePaths[0],
        name: 'file',
        success: (res) => {
          const resp = JSON.parse(res.data)
          if (resp.code == 200) {
            userStore.userInfo.avatar = resp.url
          }
        },
      });
    }
  });
}

const actions = reactive([{
  name: '男',
  sex: "0",
},
  {
    name: '女',
    sex: "1",
  },
  {
    name: '保密',
    sex: "2",

  },
])

const rules = {
  'nickname': {
    type: 'string',
    required: true,
    message: '请填写姓名',
    trigger: ['blur']
  }
}

const fromInfo = ref()

onMounted(() => {
  fromInfo.value.setRules(rules)
})

const save = () => {
  fromInfo.value.validate().then(async () => {
    await reqChangeUserInfo(userinfo).then((res) => {
      if (res.code == 200) {
        uni.showToast({
          title: '修改成功',
          icon: 'success',
          duration: 1000
        })
        storeUserinfo.nickName = userinfo.nickName
        storeUserinfo.gender = userinfo.gender
        storeUserinfo.signature = userinfo.signature
        uni.navigateBack({})
      }
    })
  })
}

const sexSelect = (e: any) => {
  sex.value = e.name
  userinfo.gender = e.sex
}

const back = () => {
  uni.navigateBack({})
}

</script>

<template>
  <view class="bar"></view>
  <image src="/static/images/Arrow.png" @click="back()" class="back"></image>
  <view>
    <view class="user-avatar">
      <image class="user-avatar-image" src="/static/images/user/bk-userinfo.png"/>
      <image class="user-avatar-item1" src="/static/images/user/menu.png"/>

    </view>
    <up-avatar size="110" class="user-avatar-img" @click="modificationAvatar()"
               :src="userStore.userInfo.avatar"></up-avatar>
    <view class="user-info">
      <h2 style="color: rgba(83, 88, 110, 1);margin-bottom: 65rpx">编辑信息</h2>

      <u--form
          labelPosition="left"
          :model="userinfo"
          ref="fromInfo"
      >

        <u-form-item
            prop="nickName"
            ref="item1"
        >

          <view class="user-form-item">
            <text class="user-text">昵称</text>
            <up-input
                v-model="userinfo.nickName"
                placeholder="请输入内容"
                border="bottom"

            ></up-input>
          </view>

        </u-form-item>

        <u-form-item
            ref="item1"
        >
          <view style="width: 100%">
            <text class="user-text">性别</text>
            <view class="user-form-item">
              <text style="margin:20rpx 20rpx;" @click="showSex = true">{{ sex }}</text>
              <u-line :hairline="false"></u-line>
            </view>
          </view>

          <template #right>
            <u-icon
                name="arrow-right"
            ></u-icon>
          </template>
        </u-form-item>

        <u-form-item
            ref="item1"
        >

          <view class="user-form-item">
            <text class="user-text">个性签名</text>
            <u--textarea v-model="userinfo.signature" placeholder="请输入内容" border="bottom"></u--textarea>
          </view>

        </u-form-item>

      </u--form>

      <up-button style="margin-top: 100rpx" type="success" @click="save()" text="保存"></up-button>

    </view>

  </view>

  <u-action-sheet
      :show="showSex"
      :actions="actions"
      title="请选择性别"
      round="20"
      @close="showSex = false"
      @select="sexSelect"
  >
  </u-action-sheet>
</template>

<style scoped lang="scss">

.user-avatar-img {
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  top: 80rpx;
  left: 110rpx;
}

.user-avatar {
  background-color: rgba(245, 243, 243, 0.7);
  height: 380rpx;
  position: relative;
  overflow: hidden;

  .user-avatar-image {
    width: 1120rpx;
    height: 450rpx;
    left: -250rpx;
    top: 100rpx;
    position: absolute;
  }

  .user-avatar-item1 {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    top: 80rpx;
    right: 30rpx;
  }

}

.user-info {
  margin: 20rpx 50rpx;

  .user-text {
    margin-left: 20rpx;
    margin-bottom: 20rpx;
    color: #AEAEAE;
    font-weight: 400;
  }

  .user-form-item {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

}

.back {
  position: absolute;
  width: 70rpx;
  height: 70rpx;
  z-index: 1;
  top: 40rpx;
  left: 25rpx;
}
</style>
